interface Hero {
  id: string;
  name: string;
}
/**
 * @ngDirective <hero-detail-directive>
 * @returns
 */
function heroDetailDirective(): ng.IDirective {
  return {
    restrict: "E",
    scope: {},
    bindToController: {
      hero: "=",
      deleted: "&",
    },
    template: html`
      <h2>{{$ctrl.hero.name}} details!</h2>
      <div><label>id: </label>{{$ctrl.hero.id}}</div>
      <button type="button" ng-click="$ctrl.onDelete()">Delete</button>
    `,
    controller: class HeroDetailController {
      static $inject = [] as string[];

      declare hero: Hero;

      declare deleted: (hero: Hero) => void;

      onDelete() {
        this.deleted(this.hero);
      }
    },
    controllerAs: "$ctrl",
  };
}
heroDetailDirective.$inject = [] as string[];

export default function (__App__: ng.IModule) {
  __App__.directive("heroDetailDirective", heroDetailDirective);
}
